<template>
	<view :style="{'padding-top':`${Pinia.totalHeight}px`}">
		<image :src="staticImg('login_bg.png')" mode="widthFix" class="rows "></image>
		<!-- #ifdef MP-WEIXIN -->
		<view class="viewbox auto m-top50 d-flex f-column a-center">
			<text class="titke">需要授权手机号，以便您下次直接登录</text>
			<text class="titke">请放心，我们将严格保护您的隐私</text>
			<view class="btns Phone">
				<text>手机号快捷登录</text>
				<button class="btnbut" open-type="getPhoneNumber" @getphonenumber="getphonenumber"></button>
			</view>
			<view class="btns accredit" @click="$back()">暂不授权</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="Login">
			<view class="tapList">
				<image :src="staticImg('l1.png')" class="iconImg"></image>
				<input type="number" v-model="phone" class="Input" placeholder="请输入手机号" />
			</view>
			<view class="tapList">
				<image :src="staticImg('l4.png')" class="iconImg"></image>
				<input type="number" v-model="verCode" class="Input" placeholder="请输入验证码" />
				<view class="code" @click="getCode">{{codeState}}</view>
			</view>
			<view class="btns Phone" @click="loginBtn">登录/注册</view>
			<view class="btns accredit" @click="$back()">暂不登录</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script setup>
	import { ref, inject, computed } from 'vue';
	import { usePiniaStore } from '@/store/pinia.js';
	import Http from '@/common/request.js';
	import reg from '@/common/reg.js';

	const Pinia = usePiniaStore();
	const { staticImg, Toast, back: $back } = inject('Utils');
	const phone = ref('');
	const verCode = ref('');
	const gainCode = ref(null);
	const codeFlag = ref(true);
	const Time = ref(60);

	const loginBtn = () => {
		if (!phone.value) return Toast('请输入手机号码');
		if (phone.value && !reg.phone.test(phone.value)) return Toast('手机号码输入有误');
		if (!this.verCode) return Toast('请输入验证码');
		Http.post({
			url: '/zzj_singleSaleApi/fastLogin',
			data: {
				phone: phone.value,
				verCode: verCode.value,
				openid: openid.value,
				reg: 1
			}
		}).then(res => {
			if (res.errcode != '100') return Toast(res.msg);
			uni.setStorageSync('vid', res.v_id);
			Pinia.$patch((state) => {
				state.vid = res.v_id
			})
			Toast(res.msg, 2);
		})
	}


	const getCode = () => {
		if (!phone.value) return Toast('请输入手机号码');
		if (phone.value && !reg.phone.test(phone.value)) return Toast('手机号码输入有误');
		if (!codeFlag.value) return;
		codeFlag.value = false;
		Http.post({
			url: '/zzj_singleSaleApi/verCode',
			data: {
				phone: phone.value
			}
		}).then(res => {
			if (res.errcode != '00000') return Toast(res.msg);
			gainCode.value = setInterval(() => {
				if (Time.value > 1) {
					Time.value--;
				} else {
					codeFlag.value = true;
					Time.value = 60;
					clearInterval(gainCode.value)
				}
			}, 1000)
		})
	}


	const getphonenumber = (e) => {
		const result = e.detail;
		Http.post({
			url: '/zzj_singleSaleApi/appletDecodePhone',
			data: {
				encryptedData: result.encryptedData,
				iv: result.iv,
				session_key: Pinia.session_key
			}
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
			Login(res.data);
		})
	}


	const Login = (purePhoneNumber) => {
		Http.post({
			url: '/zzj_singleSaleApi/appletLogin',
			data: {
				openid: Pinia.openid,
				nickName: '-',
				headimg: '',
				purePhoneNumber,
				share_v_id: Pinia.share_v_id
			}
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
			uni.setStorageSync('vid', res.v_id);
			Pinia.$patch((state) => {
				state.vid = res.v_id
				state.userInfo = res.userInfo
			})
			Toast(res.msg, 2)
		})
	}


	const codeState = computed(() => {
		return codeFlag.value ? `获取验证码` : `重新发送 ${Time.value}s`
	})
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.titke {
		color: #999;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.btns {
		width: 550rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.Phone {
		background-color: $themeColor;
		color: #ffffff;
		font-size: 32rpx;
	}

	.accredit {
		font-size: 32rpx;
		color: #999;
	}

	.accredit::after {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid rgba(0, 0, 0, .2);
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 40px;
	}

	.btnbut {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
		background-color: transparent;
		border: none;
	}

	.btnbut::after {
		border: none;
	}

	.Login {
		width: 620rpx;
		padding: 30rpx;
		// box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(153,153,153,0.24);
		margin: 0 auto;
		border-radius: 10rpx;
	}

	.tapList {
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid rgba(228, 228, 228, .5);
		display: flex;
		align-items: center;
	}

	.iconImg {
		width: 42rpx;
		height: 42rpx;
	}

	.Input {
		flex: 1;
		height: 100%;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.code {
		color: $themeColor;
		;
		font-size: 28rpx;
	}
</style>